<template>
  <view class="map">
    <map
      :longitude="longitude"
      :latitude="latitude"
      :markers="markers"
      :scale="scale"
    />
    <button
      @click="openPos"
      type="primary"
    >打个某个位置</button>
    <button
      @click="choosePos"
      type="primary"
    >选择某个位置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 经度
      longitude: '',
      // 维度
      latitude: '',
      // 地图缩放级别=>缩放级别，取值范围为3-20
      // 值越大=》地图显示越详细
      scale: 16,
      // 地图打点数据
      markers: []
    }
  },
  onLoad() {
    this.getLocation()
  },
  methods: {
    // 获取用户位置
    async getLocation() {
      const [error, pos] = await uni.getLocation({
        type: 'gcj02'
      })
      if (!error) {
        console.log(pos)
        this.longitude = pos.longitude
        this.latitude = pos.latitude
        // 地图打点标记
        this.markers.push({
          longitude: pos.longitude,
          latitude: pos.latitude
        })
      }
    },
    // 根据传入的经纬度打开地图显示
    openPos() {
      console.log(this.longitude, this.latitude)
      uni.openLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        success: function () {
          console.log('success');
        }
      })
    },
    // 选择地图中的位置=》获取经纬度
    choosePos() {
      uni.chooseLocation({
        success: (res) => {
          console.log('位置名称：' + res.name);
          console.log('详细地址：' + res.address);
          console.log('纬度：' + res.latitude);
          console.log('经度：' + res.longitude);
          // 地图打点标记
          this.markers.push({
            longitude: res.longitude,
            latitude: res.latitude
          })
        }
      });
    }
  },

}
</script>

<style lang="scss" scoped>
.map {
  map {
    width: 100%;
    height: 600rpx;
  }
}
</style>